{include "INC_header.html" title="应用管理"}
<div id="app-outlet">
    <!-- ant-design 应用需要配置 -->
    <a-config-provider :locale="configs.locale" :theme="configs.theme">
        <div class="margin-left padding-top margin-right">
            <a-alert message="如果设置了多个默认应用，以排序最后的为准，域名请求将默认进入该应用。" type="warning" show-icon />
        </div>
        <div class="module-list">
            <div class="module-item" v-for="(m, index) in list" v-show="m.value != 'install' && m.value != 'admin'">
                <div style="position: absolute; left: var(--space-width); top: var(--space-width);" class="text-small danger-text" v-if="m.default">默认</div>
                <div class="icon">
                    <i :class="m.icon"></i>
                </div>
                <div class="text-center text-bold padding-top">{{ m.name }}</div>
                <div class="text-center text-small medium-text" style="margin-top: 5px;">
                    <a-tag color="orange" style="margin: 0;">{{ m.id }}</a-tag>
                </div>
                <!-- 信息 -->
                <div class="padding-half" style="border-bottom: solid 1px #eee;">
                    <div class="ui flex-item padding-half">
                        <div class="center medium-text justify-center">应用状态</div>
                        <div class="end justify-center">
                            <a-switch @change="switchItem(index)" :checked="m.enable" checked-children="开" un-checked-children="关"></a-switch>
                        </div>
                    </div>
                    <div class="ui flex-item padding-half">
                        <div class="center medium-text">请求入口</div>
                        <div class="end">
                            <a v-if="m.enable" :href="m.enable ? ('/' + m.key) : 'javascript:void(0);'" :target="m.enable ? '_blank' : ''">/{{ m.key }}</a>
                            <span v-else>-</span>
                        </div>
                    </div>
                    <div class="ui flex-item padding-half">
                        <div class="center medium-text">APPID</div>
                        <div class="end">
                            <a :href="m.detail.url || 'javascript:void(0);'" :target="m.detail.url != undefined && m.detail.url != null && m.detail.url != '' ? '_blank' : ''">{{ m.appid || '-' }}</a>
                        </div>
                    </div>
                    <div class="ui flex-item padding-half">
                        <div class="center medium-text">版本</div>
                        <div class="end">{{ m.version || '-'}}</div>
                    </div>
                    <div class="ui flex-item padding-half">
                        <div class="center medium-text">作者</div>
                        <div class="end">
                            <div class="max-one-line-text" v-if="m.detail.authors.length > 0">
                                <template v-for="(a, ai) in m.detail.authors"><a :href="a.url || 'javascript:void(0);'" target="_blank">幺月儿</a>{{ ai < m.detail.authors.length-1 ? ',' : ''}}</template>
                            </div>
                            <template v-else>-</template>
                        </div>
                    </div>
                </div>
                <!--  -->
                <a-row :gutter="12" style="padding: 12px;">
                    <a-col flex="1" class="text-center" v-if="m.configUrl != undefined && m.configUrl != null && m.configUrl != ''"><a-button block :href="m.configUrl">配置</a-button></a-col>
                    <a-col flex="1" class="text-center"><a-button :disabled="m.value == 'install' || m.value=='admin'" block @click="editModule(index)">修改</a-button></a-col>
                </a-row>
            </div>
            <div class="module-item plus" v-if="config.store.enable" @click="openStore">
                <div class="btn"></div>
                <div class="label">点击添加应用</div>
            </div>
        </div>
        <!-- 编辑窗口 -->
        <a-modal v-model:visible="editing"
                 title="修改应用信息"
                 cancel-text="取消"
                 ok-text="保存"
                 @ok="save">
            <div class="ui form">
                <div class="fields">
                    <div class="field">
                        <div class="label">应用状态</div>
                        <a-radio-group v-model:value="module.enable">
                            <a-radio :value="true">开启</a-radio>
                            <a-radio :value="false">关闭</a-radio>
                        </a-radio-group>
                    </div>
                    <div class="field">
                        <div class="label">设为默认应用</div>
                        <a-radio-group v-model:value="module.default">
                            <a-radio :value="true">是</a-radio>
                            <a-radio :value="false">否</a-radio>
                        </a-radio-group>
                    </div>
                </div>
                <div class="fields">
                    <div class="field">
                        <div class="label">自定义图标</div>
                        <a-input style="width: 120px;" v-model:value="module.icon" placeholder="可自定义"></a-input>
                    </div>
                    <div class="field">
                        <div class="label">自定义名称</div>
                        <a-input v-model:value="module.name" placeholder="可自定义"></a-input>
                    </div>
                </div>
                <div class="field">
                    <div class="label">自定义请求入口</div>
                    <a-input v-model:value="module.key" placeholder="可自定义"></a-input>
                </div>
                <div class="field">
                    <div class="label">自定义域名</div>
                    <a-input v-model:value="module.domain" placeholder="可自定义，自动匹配域名到入口"></a-input>
                </div>
            </div>
        </a-modal>
    </a-config-provider>
</div>
<script>
    //vue app
    const { createApp, defineComponent, ref } = Vue;
    const { message } = antd;
    const app = createApp({
        data() {
            return {
                //主题配置
                configs: appProviderConfig,
                //数据
                list: [],
                //正在编辑
                module: {
                    id: '',
                    key: '',
                    value: '',
                    icon: '',
                    name: '',
                    enable: true,
                    default: false
                },
                editing: false,
                saveLoading: false,
                //
                config: {
                    store: {
                        enable: true,
                        url: '',
                        key: ''
                    }
                }
            }
        },
        mounted() {
            let self = this;
            axios.get("{url url='/admin/api/config'}").then(({ data }) => {
                if (data.error === 0) {
                    self.config = data.data;
                }
            })
            //挂载成功
            this.initData();
        },
        methods: {
            initData() {
                const hide = message.loading("正在加载配置...");
                let self = this;
                axios.get("{url url='/admin/api/modules/list'}").then(({ data }) => {
                    hide();
                    if (data.error === 0) {
                        self.list = data.data;
                    } else {
                        message.error(data.message);
                    }
                }).catch(() => {
                    hide();
                    message.error("服务端繁忙");
                });
            },
            switchItem(index) {
                let id = this.list[index].id;
                let self = this;
                axios.post("{url url='/admin/api/modules/switch'}", { id, moduleName: id, value: id }).then(({ data }) => {
                    if (data.error === 0) {
                        self.list[index].enable = !self.list[index].enable;
                        message.success("应用状态已更新");
                        if (window.parent) {
                            window.parent.postMessage({
                                event: "reloadModules"
                            });
                        }
                    } else {
                        message.error(data.message);
                    }
                }).catch(() => {
                    message.error("服务端繁忙");
                });
            },
            editModule(index) {
                let module = this.list[parseInt(index)];
                this.module = {
                    id: module.id,
                    key: module.key,
                    value: module.value,
                    icon: module.icon,
                    name: module.name,
                    enable: module.enable,
                    default: module.default
                };
                this.editing = true;
            },
            openStore() {
                if (this.config.store.enable) {
                    window.location.href = this.config.store.url + "?key=" + this.config.store.key;
                }
            },
            //方法
            save: function () {
                if (this.saveLoading) {
                    return;
                }
                this.saveLoading = true;
                let self = this;
                let data = {
                    id: self.module.id,
                    key: self.module.key,
                    value: self.module.value,
                    icon: self.module.icon,
                    name: self.module.name,
                    enable: self.module.enable ? 1 : 0,
                    default: self.module.default ? 1 : 0
                };
                axios.post("{url url='/admin/api/modules/save'}", data).then(({ data }) => {
                    self.saveLoading = false;
                    if (data.error === 0) {
                        self.editing = false;
                        message.success(data.message);
                        self.initData();
                        if (window.parent) {
                            window.parent.postMessage({
                                event: "reloadModules"
                            });
                        }
                    } else {
                        message.error(data.message);
                    }
                }).catch(() => {
                    self.saveLoading = false;
                    message.error("服务端繁忙");
                });
            }
        }
    }).use(antd);
    //挂载
    const vm = app.mount("#app-outlet");
</script>
{include "INC_footer.html"}